<template>
  <div id="navbar">
    <div class="lww_header">
      <div class="header_wrap">
        <div class="header_logo">
          <a href="javascript:void(0);" class="lww_logo"></a>
        </div>
        <ul class="header_nav">
          <li name="index" :class="{header_nav_active:$route.path==='/'}" @click="$router.push('/')">
            <a >首页</a>
          </li>
          <li name="destination" :class="{header_nav_active:$route.path==='/destination'}" @click="$router.push('/destination')"><a >目的地</a></li>
          <li name="strategy" :class="{header_nav_active:$route.path==='/strategy'}" @click="$router.push('/strategy')"><a >旅游攻略</a></li>
          <li name="travel" :class="{header_nav_active:$route.path==='/travel'}" @click="$router.push('/travel')"><a >旅游日记</a></li>
          <li name="">
            <a href="javascript:void(0);"
              >去旅行<i class="icon_caret_down"></i
            ></a>
          </li>
          <li name="">
            <a href="javascript:void(0);"
              >社区<i class="icon_caret_down"></i
            ></a>
          </li>
        </ul>
        <div class="header_search">
          <input type="text" />
          <a class="icon_search"></a>
        </div>
        <div class="login_info" style="display: none">
          <div class="head_user">
            <a href="./index.html">
              <img src="../assets/images/default.jpg" id="login_user_headUrl" />
              <i class="icon_caret_down"></i>
            </a>
          </div>
          <div class="header_msg">消息<i class="icon_caret_down"></i></div>
          <div class="header_daka">
            <a href="javascript:void(0);">打卡</a>
          </div>
        </div>
        <!-- 未登录 -->
        <div class="login-out" v-show="show">
          <a
            class="weibo-login"
            title="微博登录"
            rel="nofollow"
            @click="login"
          ></a>
          <a class="qq-login" title="QQ登录" rel="nofollow" @click="login"></a>
          <a
            class="weixin-login"
            title="微信登录"
            rel="nofollow"
            @click="login"
          ></a>
          <a id="_j_showlogin" title="登录骡窝窝" rel="nofollow" @click="login"
            >登录</a
          >
          <span class="split">|</span>
          <a title="注册帐号" rel="nofollow" @click="regist">注册</a>
        </div>
        <!-- 已登录 -->
        <div v-show="!show" class="logged">
          <img class="logged-img" src="../assets/images/default.jpg" />
          <span class="logged-text" @click="signout">退出登录</span>
        </div>
      </div>
      <div class="shadow"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //登录状态
      show: true,
    };
  },
  methods: {
    //登录
    login() {
      //跳转登录页面
      this.$router.push("/login");
      //存头部隐藏值
      this.$store.state.loginShow = false;
    },
    //退出
    signout() {
      //删除登录凭证
      localStorage.clear("token");
      //打开登录状态
      this.show = true;
    },
    //注册
    regist() {
      //跳转注册页面
      this.$router.push("/regist");
      //存头部隐藏值
      this.$store.state.loginShow = false;
    },
  },
  created() {
    //修改登录状态
    let token = this.$store.state.loginToken;
    if (token) {
      this.show = false;
    } else {
      this.show = true;
    }
  },
  watch: {
    "$route.path": {
      handler(newVal, loadVal) {
        //修改登录状态
        let token = this.$store.state.loginToken;
        if (token) {
          this.show = false;
        } else {
          this.show = true;
        }
        if (newVal == "/") {
          //存头部隐藏值
          this.$store.state.loginShow = true;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.logged {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  .logged-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .logged-text {
    margin-left: 20px;
    cursor: pointer;
  }
}
</style>
